{extend name="web/official_common/mobile/base" /}


{block name="content"}
<!--主体内容 开始-->
<div class="article">
    <!--右侧区域 开始-->
    <div id="right">
        <div class="right_title">
            <h2 class="right_title_2">
                <img src="__ADDON__/images/titleleftbg.png" align="absmiddle">{:ze($res,'name')}
                <img src="__ADDON__/images/titlerightbg.png" align="absmiddle">
            </h2>
        </div>
        <div class="right_body">
            <table class="resume_table">
                <form enctype="multipart/form-data" class="layui-form" id="frmResume">
                    {:token()}
                    <tbody>
                        <tr class="layui-form-item">
                            <th>
                                <label class="layui-form-label">{:__l('online_message','Title')}</label>
                            </th>
                            <td class="layui-input-block">
                                <input type="text" name="title" required  lay-verify="required" autocomplete="off" placeholder="{:__l('index','Fill in')}{:__l('online_message','Title')}" class="layui-input">
                            </td>
                        </tr>
                        <tr class="layui-form-item">
                            <th>
                                <label class="layui-form-label">{:__l('online_message','Name')}</label>
                            </th>
                            <td class="layui-input-block">
                                <input type="text" name="name" required  lay-verify="required" autocomplete="off" placeholder="{:__l('index','Fill in')}{:__l('online_message','Name')}" class="layui-input">
                            </td>
                        </tr>
                        <tr class="layui-form-item">
                            <th>
                                <label class="layui-form-label">{:__l('online_message','Phone')}</label>
                            </th>
                            <td class="layui-input-block">
                                <input type="tel" name="phone" required  lay-verify="required" autocomplete="off" placeholder="{:__l('index','Fill in')}{:__l('online_message','Phone')}" class="layui-input">
                            </td>
                        </tr>
                        <tr class="layui-form-item">
                            <th>
                                <label class="layui-form-label">{:__l('online_message','Content')}</label>
                            </th>
                            <td class="layui-input-block">
                                <textarea placeholder="{:__l('index','Fill in')}{:__l('online_message','Content')}" name="content" class="layui-textarea" required></textarea>
                            </td>
                        </tr>
                        {if $captchaType}
                        <tr class="layui-form-item">
                            <th>
                                <label class="layui-form-label">{:__l('index','Captcha')}</label>
                            </th>
                            <td class="layui-input-block">
                                 <input type="text" name="captcha" id="captcha_input" required lay-verify="required" autocomplete="off" placeholder="请填写验证码" class="layui-input captcha_input" style="width: 10rem;float: left">
                                 <img src="{:captcha_src()}" width="100" height="40" onclick="this.src = '{:captcha_src()}?r=' + Math.random();" style="margin-left: 10px;margin-top: 5px"/>
                            </td>
                        </tr>
                        {/if}
                        <tr class="layui-form-item">
                            <td colspan="2" class="operation" style="padding-top: 2rem;">
                                <button class="form_button btn in_post" stu="1" type="button" lay-filter="demo1" style="width: 100%">{:__l('online_message','Submit a message')}</button>
                            </td>
                        </tr>
                    </tbody>
                </form>
            </table>
            <div class="page"></div>
        </div>
        <div class="right_bottom"></div>
    </div>
    <!--右侧区域 结束-->
    <div class="clear"></div>
</div>
<!--主体内容 结束-->

<style>
    .layui-textarea{
        margin-top: 5px !important;
    }
    .layui-input{
        margin-top: 5px !important;
    }
    .layui-form-label{
        text-align: left !important;
    }
</style>




{/block}

{block name="js"}
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    $(function (){

    })
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;


        //日期
        laydate.render({
            elem: '#date'
        });


        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '标题至少得5个字符啊';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });



        $('.in_post').click(function () {
            let that = this;
            let title = $("input[name='title']").val();
            let name = $("input[name='name']").val();
            let phone = $("input[name='phone']").val();
            let content = $("textarea[name='content']").val();
            let __token__ = $("input[name='__token__']").val();
            let captcha = $("#captcha_input").val();

            let stu = $('.in_post').attr('stu');
            if (stu != 1){
                layer.msg("{:__l('index','Do not click again')}");
            }

            if (!title){
                layer.msg("{:__l('online_message','Title')}"+"{:__l('index','No_empty')}");
                return false;
            }
            if (!name){
                layer.msg("{:__l('online_message','Name')}"+"{:__l('index','No_empty')}");
                return false;
            }
            if (!phone){
                layer.msg("{:__l('online_message','Phone')}"+"{:__l('index','No_empty')}");
                return false;
            }
            if (!content){
                layer.msg("{:__l('online_message','Content')}"+"{:__l('index','No_empty')}");
                return false;
            }
            if (!captcha){
                layer.msg("{:__l('index','Captcha')}"+"{:__l('index','No_empty')}");
                return false;
            }

            var data = {
                name:name,
                title:title,
                phone:phone,
                content:content,
                captcha:captcha,
                __token__:__token__
            };

            $('.in_post').attr('stu',2);


            axios.post('', data)
                .then(function (response) {
                    let data = response.data;
                    $('.in_post').attr('stu',1);
                    if(data.code){
                        //信息框-例1
                        layer.alert(data.msg, {icon: 6,title:"{:__l('index','Successful tip')}"});
                        $("input[name='name']").val('');
                        $("input[name='title']").val('');
                        $("input[name='phone']").val('');
                        $("textarea[name='content']").val('');
                        $("input[name='captcha']").val('');
                        return false;
                    }
                    //信息框-例1
                    layer.msg(data.msg, {icon: 5},function(){
                        axios.get("{:addon_url('official/web.official_home/get_token')}", data)
                            .then(function (response) {
                                let res = response.data;
                                if (res.code == 1){
                                    $("input[name='__token__']").val(res.data)
                                }
                            })
                    });
                    console.log('');
                })
                .catch(function (error) {
                    console.log(error);
                });
        })

    });
</script>
{/block}